@use "../../variables" as *;

// .svc-tab-logic-edit {
//   width: 100%;
//   height: 100%;
//   background: $background-dim;
// }

// .svc-tab-logic-edit__content {
//   height: calc(100% - calc(6 * #{$base-unit}));
//   overflow-y: auto;
//   overflow-x: hidden;
//   padding-left: 16%;
//   padding-right: 16%;
//   //max-width: calcSize(75);
//   //margin: auto;
//   // background: $background;
// }

// .svc-tab-logic-edit__content .sd-row {
//   flex-wrap: wrap;
// }

.svc-logic_trigger-editor .sd-row {
  margin-top: 0;
}

// .svc-tab-logic-edit__content-actions {
//   .sv-action-bar {
//     padding: 0;
//     height: calc(6 * #{$base-unit});
//     background: $background;
//     border-top: 1px solid var(--sjs-border-default, var(--border, #d6d6d6));
//     width: 100%;
//   }
// }

.svc-logic-paneldynamic div.svc-logic-operator {
  box-sizing: content-box;
  max-width: calcSize(40);
}

.svc-logic-paneldynamic .svc-logic-operator {
  @include ctrDefaultBoldFont;
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--ctr-expression-item-corner-radius, var(--sjs-corner-radius-x1));
  padding: var(--ctr-expression-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-right, var(--sjs-spacing-x2)) var(--ctr-expression-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-left, var(--sjs-spacing-x2));

  border: none;
  outline: none;
  cursor: pointer;

  // option {
  //   background: $background;
  //   color: $foreground;
  // }
}

// .svc-logic-operator:focus {
//   outline: 1px dotted $primary;
// }


.svc-logic-operator.svc-logic-operator {
  transition: background-color $creator-transition-duration, color $creator-transition-duration;

  &:hover,
  &:focus {
    color: var(--ctr-expression-item-text-color-parameter-hovered, var(--sjs-semantic-blue-foreground-100, #ffffffff));
    outline: none;
    box-shadow: none;
  }
}

.svc-logic-operator.svc-logic-operator--question {
  background-color: var(--ctr-expression-item-background-color-parameter, var(--sjs-semantic-blue-background-10, #437fd91a));
  color: var(--ctr-expression-item-text-color-parameter-empty, var(--sjs-layer-3-foreground-50, #00000080));

  &:hover,
  &:focus {
    background-color: var(--ctr-expression-item-background-color-parameter-hovered, var(--sjs-semantic-blue-background-500, #437fd9ff));
    color: var(--ctr-expression-item-text-color-parameter-hovered, var(--sjs-semantic-blue-foreground-100, #ffffffff));
  }
}

.svc-logic-operator.svc-logic-operator--conjunction {
  background-color: var(--ctr-expression-item-background-color-conjunction, var(--sjs-semantic-yellow-background-10, #ff98141a));
  color: var(--ctr-expression-item-text-color-conjunction-empty, var(--sjs-layer-3-foreground-50, #00000080));

  &:hover,
  &:focus {
    background-color: var(--ctr-expression-item-background-color-conjunction-hovered, var(--sjs-semantic-yellow-background-500, #ff9814ff));
    color: var(--ctr-expression-item-text-color-conjunction-hovered, var(--sjs-semantic-yellow-foreground-100, #ffffffff));
  }
}

.svc-logic-operator.svc-logic-operator--operator {
  background-color: var(--ctr-expression-item-background-color-operator, var(--sjs-semantic-yellow-background-10, #ff98141a));
  color: var(--ctr-expression-item-text-color-operator-empty, var(--sjs-layer-3-foreground-50, #00000080));

  &:hover,
  &:focus {
    background-color: var(--ctr-expression-item-background-color-operator-hovered, var(--sjs-semantic-yellow-background-500, #ff9814ff));
    color: var(--ctr-expression-item-text-color-operator-hovered, var(--sjs-semantic-yellow-foreground-100, #ffffffff));
  }
}

.svc-logic-operator.svc-logic-operator--action {
  background-color: var(--ctr-expression-item-background-color-action, var(--sjs-semantic-red-background-10, #e50a3e1a));
  color: var(--ctr-expression-item-text-color-action-empty, var(--sjs-layer-3-foreground-50, #00000080));

  &:hover,
  &:focus {
    background-color: var(--ctr-expression-item-background-color-action-hovered, var(--sjs-semantic-red-background-500, #e50a3eff));
    color: var(--ctr-expression-item-text-color-action-hovered, var(--sjs-semantic-red-foreground-100, #ffffffff));
  }
}

.svc-logic-operator--action.sl-paneldynamic__add-btn,
.svc-logic-operator--operator.sl-paneldynamic__add-btn {
  margin-top: var(--ctr-expression-rows-gap, var(--sjs-spacing-x2));
}

.svc-logic-operator--action.sl-paneldynamic__add-btn {
  color: var(--ctr-expression-item-text-color-action, var(--sjs-layer-3-foreground-100, #000000e6));
}

.svc-logic-operator--operator.sl-paneldynamic__add-btn {
  color: var(--ctr-expression-item-text-color-operator, var(--sjs-layer-3-foreground-100, #000000e6));
}

.svc-logic-question--answered .svc-logic-operator--question {
  color: var(--ctr-expression-item-text-color-parameter, var(--sjs-layer-3-foreground-100, #000000e6));
}

.svc-logic-question--answered .svc-logic-operator--conjunction {
  color: var(--ctr-expression-item-text-color-conjunction, var(--sjs-layer-3-foreground-100, #000000e6));
}

.svc-logic-question--answered .svc-logic-operator--operator {
  color: var(--ctr-expression-item-text-color-operator, var(--sjs-layer-3-foreground-100, #000000e6));
}

.svc-logic-question--answered .svc-logic-operator--action {
  color: var(--ctr-expression-item-text-color-action, var(--sjs-layer-3-foreground-100, #000000e6));
}


.svc-logic-operator.svc-logic-operator--error {
  box-shadow: inset 0 0 0 2px
    var(--ctr-expression-item-border-color-error, var(--sjs-semantic-red-background-500, #e50a3eff));
  &:hover,
  &:focus {
    box-shadow: inset 0 0 0 2px
      var(--ctr-expression-item-border-color-error, var(--sjs-semantic-red-background-500, #e50a3eff));
    background-color: var(--ctr-expression-item-background-color-parameter-error, var(--sjs-layer-1-background-500, #ffffffff));
    color: var(--ctr-expression-item-text-color-parameter-error, var(--sjs-semantic-red-background-500, #e50a3eff));
  }
}

.svc-logic-operator__error {
  display: none;
}

.svc-logic-paneldynamic {
  .sd-paneldynamic__separator {
    display: none;
  }
}


.svc-action-button--icon.svc-icon-remove {
  display: none;
  padding: var(--ctr-expression-item-padding-top, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-right-icon-only, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-bottom, var(--sjs-spacing-x1)) var(--ctr-expression-item-padding-left-icon-only, var(--sjs-spacing-x1));
  border-radius: var(--ctr-expression-item-corner-radius, var(--sjs-corner-radius-x1));
  background: none;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;

  .sv-svg-icon {
    width: var(--ctr-expression-item-icon-width, var(--sjs-font-size-x3));
    height: var(--ctr-expression-item-icon-height, var(--sjs-font-size-x3));
  }

  use {
    fill: var(--ctr-expression-item-icon-color, var(--sjs-semantic-red-background-500, #e50a3eff));
  }

  &:focus,
  &:hover {
    background-color: var(--ctr-expression-item-background-color-remove-button-hovered, var(--sjs-semantic-red-background-10, #e50a3e1a));
  }

  &.svc-action-button--disabled {
    fill: var(--ctr-survey-action-button-icon-color-disabled, var(--sjs-layer-1-foreground-50, #00000080));
  }
}

.sl-panel-wrapper--in-row:hover .svc-icon-remove,
.sl-panel-wrapper--in-row:focus-within .svc-icon-remove {
  display: flex;
}


.svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
  display: none;
}

.svc-logic-paneldynamic__button.svc-logic-paneldynamic__remove-btn {
  display: none;
}

.svc-logic-tab__content {
  /* disable library transition animations */
  --sjs-transition-duration: 0ms;
}

.svc-logic-tab__content {
  &.svc-logic-tab--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .svc-logic-tab__content-action {
      // width: calcSize(33);
      margin: 0;
    }
  }

  .svc-logic-tab__content-action {
    margin-left: 25%;
    margin-right: 25%;
    margin-top: var(--ctr-surface-gap, var(--sjs-spacing-x5));
    margin-bottom: calcSize(8);
  }

  .svc-logic-tab__content-action--disabled {
    cursor: default;
    outline: solid calcSize(0.25) transparent;

    &:focus,
    &:hover {
      background-color: var(--ctr-button-background-color, var(--sjs-layer-1-background-500, #ffffffff));
      box-shadow: 0px 1px 2px 0px var(--ctr-shadow-small-color, var(--sjs-special-shadow, #00000040));
    }
  }

  .svc-logic-tab__content-action--disabled .svc-btn__text {
    color: var(--ctr-button-text-color-disabled, var(--sjs-layer-1-foreground-100, #000000e6));
    opacity: var(--ctr-button-text-opacity-disabled, 0.25);
  }

  .sd-paneldynamic__panel-wrapper--in-row {
    margin-top: 0;
    align-items: start;
  }
}

.svc-logic-tab__content-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.svc-logic-paneldynamic {
  .sd-row--multiple {
    padding: 0;
    background: none;
    box-shadow: none;

    border-radius: 0;
    overflow: visible;
  }

  .sd-question__content {
    margin-top: 0;
  }

  .sd-row__panel {
    width: calc(100% - 5 * #{$base-unit});
  }
}

.svc-logic-tab__content .svc-logic-paneldynamic .sd-row {
  margin-top: 0;
  flex-flow: row wrap;
}

.sl-table__cell.sd-table__cell-action--show-detail {
  use {
    fill: var(--ctr-collapse-button-icon-color, var(--sjs-layer-3-foreground-75, #000000bf));
  }
}

.sl-table__cell--detail-panel {
  padding: 0;

  .sd-body {
    margin: 0;
    min-width: none;
    max-width: none;
  }

  .sd-page.sd-body__page {
    padding: 0;
  }

  .sl-panel__footer {
    margin: 0;
  }
}

.sl-dropdown {
  max-width: 45vw;
}

.sl-dropdown__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svc-logic-placeholder {
  width: calcSize(78);
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--lbr-question-panel-header-padding-bottom, var(--lbr-spacing-x2));
  border-radius: var(--lbr-question-panel-corner-radius, var(--lbr-corner-radius-x05));
  background: var(--lbr-question-panel-background-color, var(--sjs-layer-1-background-500, #ffffffff));
  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px) var(--lbr-question-panel-shadow-offset-y, 1px)
    var(--lbr-question-panel-shadow-blur, 2px) var(--lbr-question-panel-shadow-spread, 0px)
    var(--lbr-question-panel-shadow-color, var(--sjs-special-shadow, #00000040));
}

.sv-popup--menu-phone,
.sv-popup--menu-tablet {
  .svc-logic-placeholder {
    width: initial;
  }
}

.svc-logic-placeholder__text.svc-logic-placeholder__text {
  @include lbrDefaultFont;
  color: var(--lbr-placeholder-text-color, var(--sjs-layer-1-foreground-50, #00000080));
  text-align: center;
  display: block;
  padding: var(--lbr-placeholder-padding-top, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-right, var(--lbr-spacing-x8))
    var(--lbr-placeholder-padding-bottom, var(--lbr-spacing-x2)) var(--lbr-placeholder-padding-left, var(--lbr-spacing-x8));
}

.svc-logic-tab__leave-apply-button {
  background-color: var(--ctr-button-background-color-danger, var(--sjs-semantic-red-background-500, #e50a3eff));
}

.svc-logic-question-value.sd-element--with-frame {
  box-shadow: var(--lbr-question-panel-shadow-offset-x, 0px)
    var(--lbr-question-panel-shadow-offset-y, 1px)
    var(--lbr-question-panel-shadow-blur, 2px)
    var(--lbr-question-panel-shadow-spread, 0px)
    var(--lbr-question-panel-shadow-color, var(--sjs-special-shadow, #00000040));
}
